<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
  <div class="min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <Header />
    <!-- 左侧导航栏 -->
    <aside
      class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto"
    >
      <nav class="py-4">
        <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
          <div
            class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
            :class="{ 'bg-blue-700': menu.active }"
            @click="toggleMenu(index)"
          >
            <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
            <span>{{ menu.name }}</span>
            <i
              class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
              :class="{ 'transform rotate-180': menu.expanded }"
            ></i>
          </div>
          <div v-if="menu.expanded" class="bg-gray-900">
            <div
              v-for="(submenu, subIndex) in menu.subMenus"
              :key="subIndex"
              class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
              :class="{ 'text-blue-400': submenu.active }"
              @click="selectSubmenu(index, subIndex)"
            >
              <a
                v-if="submenu.link"
                :href="submenu.link"
                data-readdy="true"
                class="text-sm w-full"
                >{{ submenu.name }}</a
              >
              <span v-else class="text-sm">{{ submenu.name }}</span>
            </div>
          </div>
        </div>
      </nav>
    </aside>
    <!-- 主内容区域 -->
    <main class="pt-16 pl-64">
      <div class="container mx-auto p-6">
        <!-- 面包屑导航 -->
        <div class="flex items-center text-sm mb-4 text-gray-500">
          <span>首页</span>
          <i class="fas fa-chevron-right mx-2 text-xs"></i>
          <span>综合分析</span>
          <i class="fas fa-chevron-right mx-2 text-xs"></i>
          <span class="text-blue-600">数据质量分析</span>
        </div>
        <!-- 筛选条件区域 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex flex-wrap items-center gap-4">
            <!-- 企业选择  -->
            <div class="flex items-center">
              <span class="text-gray-600 mr-2">企业选择：</span>
              <div class="relative">
                <button
                  @click="toggleCompanyDropdown"
                  class="flex items-center justify-between w-48 px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-200 transition-colors"
                >
                  <span class="text-gray-700">{{
                    getSelectedCompanyLabel
                  }}</span>
                  <i
                    class="fas fa-chevron-down text-gray-500 text-xs transition-transform duration-200"
                    :class="{ 'transform rotate-180': showCompanyDropdown }"
                  ></i>
                </button>
                <!-- 企业下拉菜单 -->
                <div
                  v-if="showCompanyDropdown"
                  class="absolute top-full left-0 mt-1 w-48 bg-white rounded-lg shadow-lg border border-gray-200 z-20 max-h-60 overflow-y-auto"
                >
                  <div class="py-1">
                    <div
                      v-for="company in companyOptions"
                      :key="company.value"
                      @click="selectCompany(company.value)"
                      class="px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 transition-colors"
                      :class="{
                        'bg-blue-50 text-blue-600 font-medium':
                          selectedCompany === company.value,
                        'text-gray-700': selectedCompany !== company.value,
                      }"
                    >
                      {{ company.label }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 时间范围筛选 - -->
            <div class="flex items-center">
              <span class="text-gray-600 mr-2">时间范围：</span>
              <div class="flex items-center">
                <input
                  type="date"
                  v-model="startDate"
                  placeholder="开始日期"
                  class="w-32 px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none focus:ring-2 focus:ring-blue-500 transition-colors"
                />
                <span class="mx-2 text-gray-500">至</span>
                <input
                  type="date"
                  v-model="endDate"
                  placeholder="结束日期"
                  class="w-32 px-3 py-2 bg-gray-100 border border-gray-300 rounded-lg text-sm focus:outline-none border-none focus:ring-2 focus:ring-blue-500 transition-colors"
                />
              </div>
            </div>
            <!-- 操作按钮 - 修改后 -->
            <div class="ml-auto flex gap-2">
              <button
                @click="handleExport"
                class="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-300 transition-colors"
                :disabled="isExporting"
              >
                <i class="fas fa-file-export mr-1"></i>
                {{ isExporting ? "导出中..." : "导出" }}
              </button>
              <button
                @click="handleQuery"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg flex items-center !rounded-button whitespace-nowrap cursor-pointer hover:bg-blue-700 transition-colors"
                :disabled="isQuerying"
              >
                <i class="fas fa-search mr-1"></i>
                {{ isQuerying ? "查询中..." : "查询" }}
              </button>
            </div>
          </div>
        </div>
        <!-- 数据质量概览 -->
        <div class="grid grid-cols-4 gap-4 mb-6">
          <!-- 数据质量评分卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-4"
            >
              <i class="fas fa-chart-line text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">数据质量评分</div>
              <div class="text-2xl font-bold text-gray-900">86.5</div>
              <div class="text-xs text-green-600 flex items-center">
                <i class="fas fa-arrow-up mr-1"></i> 环比增长 3.2%
              </div>
            </div>
          </div>
          <!-- 数据完整性卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-4"
            >
              <i class="fas fa-check-circle text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">数据完整性</div>
              <div class="text-2xl font-bold text-gray-900">92.8%</div>
              <div class="text-xs text-green-600 flex items-center">
                <i class="fas fa-arrow-up mr-1"></i> 环比增长 1.5%
              </div>
            </div>
          </div>
          <!-- 数据准确性卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-4"
            >
              <i class="fas fa-bullseye text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">数据准确性</div>
              <div class="text-2xl font-bold text-gray-900">88.4%</div>
              <div class="text-xs text-yellow-600 flex items-center">
                <i class="fas fa-arrow-down mr-1"></i> 环比下降 0.6%
              </div>
            </div>
          </div>
          <!-- 数据及时性卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 flex items-center">
            <div
              class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-4"
            >
              <i class="fas fa-clock text-xl"></i>
            </div>
            <div>
              <div class="text-sm text-gray-500">数据及时性</div>
              <div class="text-2xl font-bold text-gray-900">94.2%</div>
              <div class="text-xs text-green-600 flex items-center">
                <i class="fas fa-arrow-up mr-1"></i> 环比增长 2.1%
              </div>
            </div>
          </div>
        </div>
        <!-- 数据质量分析图表 -->
        <div class="grid grid-cols-2 gap-6 mb-6">
          <!-- 质量评分趋势图 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex justify-between items-center mb-4">
              <h2 class="font-bold text-lg text-gray-800">质量评分趋势</h2>
              <div class="flex space-x-2">
                <button
                  class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  :class="
                    currentPeriod === 'week'
                      ? 'bg-blue-600 text-white'
                      : 'bg-gray-100 text-gray-700'
                  "
                  @click="changePeriod('week')"
                >
                  周
                </button>
                <button
                  class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  :class="
                    currentPeriod === 'month'
                      ? 'bg-blue-600 text-white'
                      : 'bg-gray-100 text-gray-700'
                  "
                  @click="changePeriod('month')"
                >
                  月
                </button>
                <button
                  class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                  :class="
                    currentPeriod === 'year'
                      ? 'bg-blue-600 text-white'
                      : 'bg-gray-100 text-gray-700'
                  "
                  @click="changePeriod('year')"
                >
                  年
                </button>
              </div>
            </div>
            <div
              id="qualityTrendChart"
              class="h-80"
              ref="qualityTrendChart"
            ></div>
          </div>
          <!-- 质量问题分布 -->
          <div class="bg-white rounded-lg shadow-sm p-4">
            <div class="flex justify-between items-center mb-4">
              <h2 class="font-bold text-lg text-gray-800">质量问题分布</h2>
              <div class="text-xs text-gray-500">
                <i class="fas fa-sync-alt mr-1"></i> 更新于 {{ currentTime }}
              </div>
            </div>
            <div
              id="qualityIssueChart"
              class="h-80"
              ref="qualityIssueChart"
            ></div>
          </div>
        </div>
        <!-- 企业数据质量评分对比 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-lg text-gray-800">
              企业数据质量评分对比
            </h2>
            <div class="flex space-x-2">
              <button
                class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                :class="
                  currentCompanyPeriod === 'month'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-100 text-gray-700'
                "
                @click="changeCompanyPeriod('month')"
              >
                本月
              </button>
              <button
                class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                :class="
                  currentCompanyPeriod === 'quarter'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-100 text-gray-700'
                "
                @click="changeCompanyPeriod('quarter')"
              >
                本季度
              </button>
              <button
                class="px-3 py-1 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                :class="
                  currentCompanyPeriod === 'year'
                    ? 'bg-blue-600 text-white'
                    : 'bg-gray-100 text-gray-700'
                "
                @click="changeCompanyPeriod('year')"
              >
                本年度
              </button>
            </div>
          </div>
          <div
            id="companyQualityChart"
            class="h-80"
            ref="companyQualityChart"
          ></div>
        </div>
        <!-- 数据完整性分析 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-lg text-gray-800">数据完整性分析</h2>
            <div class="text-xs text-gray-500">
              <i class="fas fa-sync-alt mr-1"></i> 更新于 {{ currentTime }}
            </div>
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6"
                  >
                    数据类别
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6"
                  >
                    完整率
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6 text-left"
                  >
                    缺失字段
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6 text-left"
                  >
                    影响范围
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6 text-left"
                  >
                    状态
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider w-1/6"
                  >
                    操作
                  </th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr
                  v-for="(item, index) in completenessData"
                  :key="index"
                  class="hover:bg-gray-50"
                >
                  <!-- 数据类别列 -->
                  <td class="px-4 py-3 w-1/6">
                    <div class="flex items-center">
                      <div
                        class="w-8 h-8 rounded-full flex items-center justify-center mr-3 flex-shrink-0"
                        :class="item.iconBg"
                      >
                        <i :class="item.icon + ' ' + item.iconColor"></i>
                      </div>
                      <div class="min-w-0 flex-1">
                        <div class="text-sm font-medium text-gray-900 truncate">
                          {{ item.category }}
                        </div>
                        <div class="text-xs text-gray-500 truncate">
                          {{ item.description }}
                        </div>
                      </div>
                    </div>
                  </td>
                  <!-- 完整率列 -->
                  <td class="px-4 py-3 w-1/6">
                    <div class="flex items-center justify-center">
                      <div
                        class="text-sm font-medium min-w-12"
                        :class="item.rateColor"
                      >
                        {{ item.completenessRate }}
                      </div>
                      <div
                        class="ml-2 w-16 bg-gray-200 rounded-full h-1.5 flex-shrink-0"
                      >
                        <div
                          class="h-1.5 rounded-full"
                          :style="{
                            width: item.completenessValue + '%',
                            backgroundColor: item.rateColor.replace(
                              'text-',
                              'bg-'
                            ),
                          }"
                        ></div>
                      </div>
                    </div>
                  </td>
                  <!-- 缺失字段列 -->
                  <td class="px-4 py-3 w-1/6">
                    <div
                      class="text-sm text-gray-900 truncate"
                      :title="item.missingFields"
                    >
                      {{ item.missingFields }}
                    </div>
                  </td>
                  <!-- 影响范围列 -->
                  <td class="px-4 py-3 w-1/6">
                    <div
                      class="text-sm text-gray-900 truncate"
                      :title="item.impact"
                    >
                      {{ item.impact }}
                    </div>
                  </td>
                  <!-- 状态列 -->
                  <td class="px-4 py-3 w-1/6">
                    <span
                      class="px-2 py-1 text-xs rounded-full inline-block min-w-16 text-center"
                      :class="item.statusClass"
                      >{{ item.status }}</span
                    >
                  </td>
                  <!-- 操作列 -->
                  <td class="px-4 py-3 whitespace-nowrap w-1/6">
                    <div class="flex space-x-2 justify-center">
                      <button
                        class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer text-sm px-2 py-1"
                        @click="showDetail(item)"
                      >
                        详情
                      </button>
                      <button
                        class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer text-sm px-2 py-1"
                        @click="handleProcess(item)"
                      >
                        处理
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 数据准确性分析 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-lg text-gray-800">数据准确性分析</h2>
          </div>
          <div class="grid grid-cols-3 gap-6 mb-4">
            <div
              v-for="(item, index) in accuracyData"
              :key="index"
              class="bg-gray-50 p-4 rounded-lg"
            >
              <div class="flex items-center mb-3">
                <div
                  class="w-10 h-10 rounded-full flex items-center justify-center mr-3"
                  :class="item.iconBg"
                >
                  <i :class="item.icon + ' ' + item.iconColor"></i>
                </div>
                <div>
                  <div class="text-sm font-medium text-gray-900">
                    {{ item.name }}
                  </div>
                  <div class="text-xs text-gray-500">
                    {{ item.description }}
                  </div>
                </div>
              </div>
              <div class="mb-2">
                <div class="flex justify-between items-center mb-1">
                  <span class="text-xs text-gray-500">准确率</span>
                  <span
                    class="text-xs font-medium"
                    :class="item.accuracyColor"
                    >{{ item.accuracyRate }}</span
                  >
                </div>
                <div class="w-full bg-gray-200 rounded-full h-1.5">
                  <div
                    class="h-1.5 rounded-full"
                    :style="{
                      width: item.accuracyValue + '%',
                      backgroundColor: item.accuracyBarColor,
                    }"
                  ></div>
                </div>
              </div>
              <div class="mb-2">
                <div class="flex justify-between items-center mb-1">
                  <span class="text-xs text-gray-500">错误率</span>
                  <span class="text-xs font-medium" :class="item.errorColor">{{
                    item.errorRate
                  }}</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-1.5">
                  <div
                    class="h-1.5 rounded-full"
                    :style="{
                      width: item.errorValue + '%',
                      backgroundColor: item.errorBarColor,
                    }"
                  ></div>
                </div>
              </div>
              <div class="text-xs text-gray-500 mt-3">
                <span>主要问题: </span>
                <span class="font-medium text-red-600">{{
                  item.mainIssue
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 数据及时性分析 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-lg text-gray-800">数据及时性分析</h2>
            <div class="text-xs text-gray-500">
              <i class="fas fa-sync-alt mr-1"></i> 更新于 {{ currentTime }}
            </div>
          </div>
          <div id="timelinessChart" class="h-80" ref="timelinessChart"></div>
        </div>
        <!-- 数据质量问题列表 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-lg text-gray-800">数据质量问题列表</h2>
            <div class="flex space-x-2">
              <!-- 严重程度筛选 -->
              <div class="relative">
                <button
                  @click="toggleSeverityFilter"
                  class="flex items-center justify-between px-3 py-2 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-200 transition-colors"
                >
                  <span>严重程度</span>
                  <i
                    class="fas fa-chevron-down ml-2 text-xs transition-transform duration-200"
                    :class="{ 'transform rotate-180': showSeverityFilter }"
                  ></i>
                </button>
                <!-- 筛选下拉菜单 -->
                <div
                  v-if="showSeverityFilter"
                  class="absolute top-full left-0 mt-1 w-32 bg-white rounded-lg shadow-lg border border-gray-200 z-20"
                >
                  <div class="py-1">
                    <div
                      v-for="option in severityOptions"
                      :key="option.value"
                      @click="selectSeverity(option.value)"
                      class="px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 transition-colors"
                      :class="{
                        'bg-blue-50 text-blue-600 font-medium':
                          severityFilter === option.value,
                        'text-gray-700': severityFilter !== option.value,
                      }"
                    >
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- 处理状态筛选 -->
              <div class="relative">
                <button
                  @click="toggleStatusFilter"
                  class="flex items-center justify-between px-3 py-2 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-200 transition-colors"
                >
                  <span>处理状态</span>
                  <i
                    class="fas fa-chevron-down ml-2 text-xs transition-transform duration-200"
                    :class="{ 'transform rotate-180': showStatusFilter }"
                  ></i>
                </button>
                <!-- 筛选下拉菜单 -->
                <div
                  v-if="showStatusFilter"
                  class="absolute top-full left-0 mt-1 w-32 bg-white rounded-lg shadow-lg border border-gray-200 z-20"
                >
                  <div class="py-1">
                    <div
                      v-for="option in statusOptions"
                      :key="option.value"
                      @click="selectStatus(option.value)"
                      class="px-3 py-2 text-sm cursor-pointer hover:bg-gray-100 transition-colors"
                      :class="{
                        'bg-blue-50 text-blue-600 font-medium':
                          statusFilter === option.value,
                        'text-gray-700': statusFilter !== option.value,
                      }"
                    >
                      {{ option.label }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- 重置筛选按钮 -->
              <button
                v-if="severityFilter !== 'all' || statusFilter !== 'all'"
                @click="resetFilters"
                class="px-3 py-2 bg-gray-100 text-gray-700 rounded text-sm !rounded-button whitespace-nowrap cursor-pointer hover:bg-gray-200 transition-colors"
              >
                重置筛选
              </button>
            </div>
          </div>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left"
                  >
                    问题描述
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left"
                  >
                    数据类型
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left"
                  >
                    影响范围
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left"
                  >
                    严重程度
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left"
                  >
                    发现时间
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider text-left"
                  >
                    处理状态
                  </th>
                  <th
                    class="px-4 py-3 bg-gray-50 text-xs font-medium text-gray-500 uppercase tracking-wider"
                  >
                    操作
                  </th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr
                  v-for="(issue, index) in paginatedDataQualityIssues"
                  :key="index"
                  class="hover:bg-gray-50"
                >
                  <td class="px-4 py-3">
                    <div
                      class="text-sm font-medium text-gray-900 justify-center"
                    >
                      {{ issue.description }}
                    </div>
                    <!-- 显示处理时间 -->
                    <div
                      v-if="issue.processTime"
                      class="text-xs text-green-600 mt-1"
                    >
                      <i class="fas fa-check-circle mr-1"></i>
                      处理于: {{ issue.processTime }}
                    </div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="text-sm text-gray-900 justify-center">
                      {{ issue.dataType }}
                    </div>
                  </td>
                  <td class="px-4 py-3">
                    <div class="text-sm text-gray-900 justify-center">
                      {{ issue.impact }}
                    </div>
                  </td>
                  <td class="px-4 py-3">
                    <span
                      class="px-2 py-1 text-xs rounded-full justify-center"
                      :class="issue.severityClass"
                      >{{ issue.severity }}</span
                    >
                  </td>
                  <td class="px-4 py-3">
                    <div class="text-sm text-gray-900 justify-center">
                      {{ issue.discoveryTime }}
                    </div>
                  </td>
                  <td class="px-4 py-3">
                    <span
                      class="px-2 py-1 text-xs rounded-full justify-center"
                      :class="issue.statusClass"
                      >{{ issue.status }}</span
                    >
                  </td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">
                    <div class="flex space-x-2 justify-center">
                      <button
                        class="text-blue-600 hover:text-blue-800 !rounded-button whitespace-nowrap cursor-pointer"
                        @click="showIssueDetail(issue)"
                      >
                        详情
                      </button>
                      <button
                        class="text-green-600 hover:text-green-800 !rounded-button whitespace-nowrap cursor-pointer"
                        @click="handleIssueProcess(issue)"
                      >
                        处理
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
            <!-- 无数据提示 -->
            <div
              v-if="filteredDataQualityIssues.length === 0"
              class="text-center py-8 text-gray-500"
            >
              <i class="fas fa-inbox text-4xl mb-2 text-gray-300"></i>
              <div>暂无符合筛选条件的数据质量问题</div>
              <button
                v-if="severityFilter !== 'all' || statusFilter !== 'all'"
                @click="resetFilters"
                class="mt-2 px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 transition-colors"
              >
                重置筛选条件
              </button>
            </div>
            <!-- 分页组件 -->
            <div
              class="flex justify-between items-center mt-4"
              v-if="filteredDataQualityIssues.length > 0"
            >
              <div class="text-sm text-gray-500">
                共
                <span class="text-blue-600 font-medium">{{
                  totalFilteredIssues
                }}</span>
                条记录
                <span
                  v-if="severityFilter !== 'all' || statusFilter !== 'all'"
                  class="text-gray-400 ml-2"
                >
                  (筛选自 {{ dataQualityIssues.length }} 条总记录)
                </span>
              </div>
              <Pagination
                :current-page="currentPage"
                :page-size="pageSize"
                :total="totalFilteredIssues"
                @page-change="handlePageChange"
                @page-size-change="handlePageSizeChange"
              />
            </div>
          </div>
        </div>
        <!-- 数据质量改进建议 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="font-bold text-lg text-gray-800">数据质量改进建议</h2>
            <div class="text-xs text-gray-500">
              <i class="fas fa-sync-alt mr-1"></i> 更新于 {{ currentTime }}
            </div>
          </div>
          <div class="grid grid-cols-1 gap-4">
            <div
              v-for="(suggestion, index) in improvementSuggestions"
              :key="index"
              class="p-4 rounded-lg border border-gray-200"
            >
              <div class="flex items-start">
                <div
                  class="w-10 h-10 rounded-full flex items-center justify-center mr-4"
                  :class="suggestion.iconBg"
                >
                  <i :class="suggestion.icon + ' ' + suggestion.iconColor"></i>
                </div>
                <div class="flex-1">
                  <div class="flex justify-between items-start mb-2">
                    <div class="text-md font-medium text-gray-900">
                      {{ suggestion.title }}
                    </div>
                    <span
                      class="px-2 py-1 text-xs rounded-full"
                      :class="suggestion.priorityClass"
                      >{{ suggestion.priority }}</span
                    >
                  </div>
                  <div class="text-sm text-gray-600 mb-3">
                    {{ suggestion.description }}
                  </div>
                  <div class="text-sm text-gray-800 mb-2">
                    <span class="font-medium">预期效果：</span
                    >{{ suggestion.expectedResult }}
                  </div>
                  <div class="flex justify-between items-center mt-2">
                    <div class="text-xs text-gray-500">
                      适用企业：{{ suggestion.applicableCompanies }}
                    </div>
                    <button
                      class="px-3 py-1 bg-blue-600 text-white rounded text-sm !rounded-button whitespace-nowrap cursor-pointer"
                      @click="showSuggestionDetail(suggestion)"
                    >
                      查看详情
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- 数据完整性分析详情模态框 -->
    <div
      v-if="showDetailModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
      <div class="bg-white rounded-lg shadow-xl w-1/2 max-w-2xl">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">数据完整性详情</h3>
        </div>
        <div class="p-6" v-if="currentSelectedItem">
          <div class="grid grid-cols-2 gap-4">
            <div class="col-span-2">
              <div class="flex items-center mb-4">
                <div
                  class="w-12 h-12 rounded-full flex items-center justify-center mr-4"
                  :class="currentSelectedItem.iconBg"
                >
                  <i
                    :class="
                      currentSelectedItem.icon +
                      ' ' +
                      currentSelectedItem.iconColor
                    "
                  ></i>
                </div>
                <div>
                  <div class="text-lg font-medium text-gray-900">
                    {{ currentSelectedItem.category }}
                  </div>
                  <div class="text-sm text-gray-500">
                    {{ currentSelectedItem.description }}
                  </div>
                </div>
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700"
                >完整率</label
              >
              <div
                class="mt-1 text-lg font-semibold"
                :class="currentSelectedItem.rateColor"
              >
                {{ currentSelectedItem.completenessRate }}
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700"
                >缺失字段</label
              >
              <div class="mt-1 text-lg font-semibold text-gray-900">
                {{ currentSelectedItem.missingFields }}
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700"
                >影响范围</label
              >
              <div class="mt-1 text-lg font-semibold text-gray-900">
                {{ currentSelectedItem.impact }}
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700"
                >状态</label
              >
              <div class="mt-1">
                <span
                  class="px-2 py-1 text-xs rounded-full"
                  :class="currentSelectedItem.statusClass"
                >
                  {{ currentSelectedItem.status }}
                </span>
              </div>
            </div>
          </div>
          <div class="mt-6">
            <label class="block text-sm font-medium text-gray-700"
              >完整率趋势</label
            >
            <div
              id="completenessTrendChart"
              class="mt-2 h-32"
              ref="completenessTrendChart"
            ></div>
          </div>
        </div>
        <div class="px-6 py-4 bg-gray-50 flex justify-end">
          <button
            @click="closeModal"
            class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
    <!-- 数据完整性分析处理模态框 -->
    <div
      v-if="showProcessModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
      <div class="bg-white rounded-lg shadow-xl w-1/2 max-w-2xl">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">处理数据完整性问题</h3>
        </div>
        <div class="p-6" v-if="currentSelectedItem">
          <div class="mb-4">
            <div class="flex items-center">
              <div
                class="w-10 h-10 rounded-full flex items-center justify-center mr-3"
                :class="currentSelectedItem.iconBg"
              >
                <i
                  :class="
                    currentSelectedItem.icon +
                    ' ' +
                    currentSelectedItem.iconColor
                  "
                ></i>
              </div>
              <div>
                <div class="text-md font-medium text-gray-900">
                  {{ currentSelectedItem.category }}
                </div>
                <div class="text-sm text-gray-500">
                  {{ currentSelectedItem.description }}
                </div>
              </div>
            </div>
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2"
              >缺失字段</label
            >
            <div class="p-3 bg-gray-50 rounded-md">
              {{ currentSelectedItem.missingFields }}
            </div>
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2"
              >处理说明</label
            >
            <textarea
              class="w-full h-24 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="请输入处理说明..."
            ></textarea>
          </div>
        </div>
        <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
          <button
            @click="closeModal"
            class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none"
          >
            取消
          </button>
          <button
            @click="confirmProcess"
            class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none"
          >
            确认处理
          </button>
        </div>
      </div>
    </div>
    <!-- 建议详情模态框 -->
    <div
      v-if="showSuggestionModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
      <div class="bg-white rounded-lg shadow-xl w-1/2 max-w-3xl">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">改进建议详情</h3>
        </div>
        <div class="p-6" v-if="currentSuggestion">
          <div class="flex items-start mb-4">
            <div
              class="w-12 h-12 rounded-full flex items-center justify-center mr-4"
              :class="currentSuggestion.iconBg"
            >
              <i
                :class="
                  currentSuggestion.icon + ' ' + currentSuggestion.iconColor
                "
              ></i>
            </div>
            <div class="flex-1">
              <div class="flex justify-between items-start mb-2">
                <div class="text-xl font-bold text-gray-900">
                  {{ currentSuggestion.title }}
                </div>
                <span
                  class="px-3 py-1 text-sm rounded-full"
                  :class="currentSuggestion.priorityClass"
                >
                  {{ currentSuggestion.priority }}
                </span>
              </div>
              <div class="text-sm text-gray-500 mb-4">
                {{ currentSuggestion.description }}
              </div>
            </div>
          </div>

          <div class="grid grid-cols-2 gap-6 mb-6">
            <div>
              <h4 class="text-md font-semibold text-gray-800 mb-2">预期效果</h4>
              <div class="text-sm text-gray-700 bg-blue-50 p-3 rounded-lg">
                {{ currentSuggestion.expectedResult }}
              </div>
            </div>
            <div>
              <h4 class="text-md font-semibold text-gray-800 mb-2">适用企业</h4>
              <div class="text-sm text-gray-700 bg-green-50 p-3 rounded-lg">
                {{ currentSuggestion.applicableCompanies }}
              </div>
            </div>
          </div>

          <div class="mb-6">
            <h4 class="text-md font-semibold text-gray-800 mb-2">实施建议</h4>
            <div class="text-sm text-gray-700 bg-gray-50 p-3 rounded-lg">
              <ul class="list-disc list-inside space-y-1">
                <li>建立专门的数据质量管理团队</li>
                <li>制定详细的数据质量改进计划</li>
                <li>定期进行数据质量评估和审计</li>
                <li>建立数据质量监控预警机制</li>
                <li>加强相关人员的数据质量管理培训</li>
              </ul>
            </div>
          </div>

          <div class="flex justify-between items-center text-sm text-gray-500">
            <div>
              <i class="fas fa-clock mr-1"></i>
              建议创建时间: 2025-07-08
            </div>
            <div>
              <i class="fas fa-user mr-1"></i>
              建议来源: 数据质量分析
            </div>
          </div>
        </div>
        <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
          <button
            @click="closeSuggestionModal"
            class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none transition-colors"
          >
            关闭
          </button>
          <button
            @click="handleSuggestionAction(currentSuggestion)"
            class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none transition-colors"
          >
            开始实施
          </button>
        </div>
      </div>
    </div>
    <!-- 数据质量问题详情模态框 -->
    <div
      v-if="showIssueDetailModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
      <div class="bg-white rounded-lg shadow-xl w-1/2 max-w-2xl">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">数据质量问题详情</h3>
        </div>
        <div class="p-6" v-if="currentIssue">
          <div class="grid grid-cols-2 gap-4">
            <div class="col-span-2">
              <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700"
                  >问题描述</label
                >
                <div class="mt-1 text-lg font-semibold text-gray-900">
                  {{ currentIssue.description }}
                </div>
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700"
                >数据类型</label
              >
              <div class="mt-1 text-lg font-semibold text-gray-900">
                {{ currentIssue.dataType }}
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700"
                >影响范围</label
              >
              <div class="mt-1 text-lg font-semibold text-gray-900">
                {{ currentIssue.impact }}
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700"
                >严重程度</label
              >
              <div class="mt-1">
                <span
                  class="px-2 py-1 text-xs rounded-full"
                  :class="currentIssue.severityClass"
                >
                  {{ currentIssue.severity }}
                </span>
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700"
                >发现时间</label
              >
              <div class="mt-1 text-lg font-semibold text-gray-900">
                {{ currentIssue.discoveryTime }}
              </div>
            </div>

            <div>
              <label class="block text-sm font-medium text-gray-700"
                >处理状态</label
              >
              <div class="mt-1">
                <span
                  class="px-2 py-1 text-xs rounded-full"
                  :class="currentIssue.statusClass"
                >
                  {{ currentIssue.status }}
                </span>
              </div>
            </div>
          </div>

          <!-- 问题详情扩展信息 -->
          <div class="mt-6">
            <label class="block text-sm font-medium text-gray-700 mb-2"
              >问题分析</label
            >
            <div class="bg-gray-50 p-4 rounded-lg">
              <div class="text-sm text-gray-700">
                <p class="mb-2">
                  该问题主要影响数据质量评分，需要及时处理以避免影响业务决策。
                </p>
                <p>建议检查相关数据源，确认数据采集和传输过程中的异常情况。</p>
              </div>
            </div>
          </div>
        </div>
        <div class="px-6 py-4 bg-gray-50 flex justify-end">
          <button
            @click="closeIssueModal"
            class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none"
          >
            关闭
          </button>
        </div>
      </div>
    </div>
    <!-- 数据质量问题处理模态框 -->
    <div
      v-if="showIssueProcessModal"
      class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
    >
      <div class="bg-white rounded-lg shadow-xl w-1/2 max-w-2xl">
        <div class="px-6 py-4 border-b border-gray-200">
          <h3 class="text-lg font-medium text-gray-900">处理数据质量问题</h3>
        </div>
        <div class="p-6" v-if="currentIssue">
          <div class="mb-4">
            <div class="flex items-center">
              <div
                class="w-10 h-10 rounded-full flex items-center justify-center mr-3"
                :class="getIssueIconBg(currentIssue.dataType)"
              >
                <i
                  :class="
                    getIssueIcon(currentIssue.dataType) +
                    ' ' +
                    getIssueIconColor(currentIssue.dataType)
                  "
                ></i>
              </div>
              <div>
                <div class="text-md font-medium text-gray-900">
                  {{ currentIssue.description }}
                </div>
                <div class="text-sm text-gray-500">
                  {{ currentIssue.dataType }} - {{ currentIssue.impact }}
                </div>
              </div>
            </div>
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2"
              >问题详情</label
            >
            <div class="p-3 bg-gray-50 rounded-md">
              <div class="flex justify-between items-center mb-2">
                <span class="text-sm font-medium">严重程度:</span>
                <span
                  class="px-2 py-1 text-xs rounded-full"
                  :class="currentIssue.severityClass"
                >
                  {{ currentIssue.severity }}
                </span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-sm font-medium">发现时间:</span>
                <span class="text-sm text-gray-600">{{
                  currentIssue.discoveryTime
                }}</span>
              </div>
            </div>
          </div>
          <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2"
              >处理说明</label
            >
            <textarea
              class="w-full h-24 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="请输入处理说明..."
            ></textarea>
          </div>
        </div>
        <div class="px-6 py-4 bg-gray-50 flex justify-end space-x-3">
          <button
            @click="closeIssueModal"
            class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 focus:outline-none"
          >
            取消
          </button>
          <button
            @click="confirmIssueProcess"
            class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none"
          >
            确认处理
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import Header from "../components/Header.vue";
import Pagination from "../components/Pagination.vue";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
  components: {
    Header,
    Pagination,
  },
  data() {
    return {
      currentTime: "2025-07-08 15:32:45",
      // 添加图表实例引用
      qualityTrendChart: null,
      qualityIssueChart: null,
      companyQualityChart: null,
      timelinessChart: null,
      currentPeriod: "month",
      currentCompanyPeriod: "month", // 添加企业数据周期变量
      // 添加模态框显示控制变量
      showDetailModal: false,
      completenessTrendChart: null, // 添加完整率趋势图表实例
      showProcessModal: false,
      // 当前选中的数据项
      currentSelectedItem: null,
      showSuggestionModal: false, // 建议详情模态框显示控制
      currentSuggestion: null, // 当前选中的建议项
      // 添加筛选相关数据
      severityFilter: "all",
      statusFilter: "all",
      showSeverityFilter: false,
      showStatusFilter: false,
      showIssueDetailModal: false, // 数据质量问题详情模态框显示控制
      showIssueProcessModal: false, // 数据质量问题处理模态框显示控制
      currentIssue: null, // 当前选中的数据质量问题项
      currentIssueIndex: -1, // 当前选中项的索引
      // 添加分页相关数据
      currentPage: 1,
      pageSize: 10,
      selectedCompany: "all", // 选中的企业
      startDate: "", // 开始日期
      endDate: "", // 结束日期
      showCompanyDropdown: false, // 控制企业下拉菜单显示
      // 企业列表数据
      companyOptions: [
        { value: "all", label: "全部企业" },
        { value: "hegang", label: "河钢集团" },
        { value: "baogang", label: "宝钢集团" },
        { value: "shougang", label: "首钢集团" },
        { value: "angang", label: "鞍钢集团" },
        { value: "wugang", label: "武钢集团" },
        { value: "magang", label: "马钢集团" },
      ],
      severityOptions: [
        { value: "all", label: "全部" },
        { value: "high", label: "高" },
        { value: "medium", label: "中" },
        { value: "low", label: "低" },
      ],
      statusOptions: [
        { value: "all", label: "全部" },
        { value: "pending", label: "未处理" },
        { value: "processing", label: "处理中" },
        { value: "resolved", label: "已处理" },
      ],
      mainMenus: [
        {
          name: "监测报警",
          icon: "fas fa-bell",
          expanded: false,
          active: false,
          subMenus: [
            { name: "数据汇聚功能", active: false, link: "/data-aggregation" },
            {
              name: "监测指标统计",
              active: false,
              link: "/monitoring-indicators",
            },
            { name: "区域化展示", active: false, link: "/regional-display" },
          ],
        },
        {
          name: "风险研判",
          icon: "fas fa-exclamation-triangle",
          expanded: false,
          active: false,
          subMenus: [
             { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: true, link: '/risk-analysis' },
                    ]
        },
        {
          name: "在线巡查",
          icon: "fas fa-search",
          expanded: false,
          active: false,
          subMenus: [
            {
              name: "企业信息汇总",
              active: false,
              link: "/summary-information",
            },
            { name: "巡查功能", active: false, link: "/patrol" },
            { name: "检索功能", active: false, link: "search" },
            { name: "一屏汇聚展示", active: false, link: "/screen-display" },
          ],
        },
        {
          name: "综合分析",
          icon: "fas fa-chart-line",
          expanded: true,
          active: true,
          subMenus: [
            { name: "联网与设备分析", active: false, link: "/equipment" },
            { name: "应用情况分析", active: false, link: "/application" },
            { name: "数据质量分析", active: true, link: "/data-quality" },
            { name: "定期专题报告", active: false, link: "report" },
          ],
        },
        {
          name: "系统管理",
          icon: "fas fa-cog",
          expanded: false,
          active: false,
          subMenus: [
            { name: "用户权限管理", active: false, link: "user-permission" },
            { name: "系统配置管理", active: false, link: "system-manage" },
            { name: "数据管理", active: false, link: "data-manage" },
            { name: "系统监控与维护", active: false, link: "monitoring" },
          ],
        },
      ],
      currentPeriod: "month",
      completenessData: JSON.parse(
        localStorage.getItem("completenessData")
      ) || [
        {
          category: "生产数据",
          description: "生产过程基础数据",
          icon: "fas fa-industry",
          iconBg: "bg-blue-100",
          iconColor: "text-blue-600",
          completenessRate: "96.8%",
          completenessValue: 96.8,
          rateColor: "text-green-600",
          missingFields: "设备运行参数, 能耗数据",
          impact: "中等影响",
          status: "已处理",
          statusClass: "bg-green-100 text-green-800",
        },
        {
          category: "安全监测数据",
          description: "安全生产监测数据",
          icon: "fas fa-shield-alt",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
          completenessRate: "94.2%",
          completenessValue: 94.2,
          rateColor: "text-green-600",
          missingFields: "气体浓度, 温度监测",
          impact: "高影响",
          status: "处理中",
          statusClass: "bg-yellow-100 text-yellow-800",
        },
        {
          category: "设备数据",
          description: "设备运行状态数据",
          icon: "fas fa-cogs",
          iconBg: "bg-green-100",
          iconColor: "text-green-600",
          completenessRate: "92.5%",
          completenessValue: 92.5,
          rateColor: "text-green-600",
          missingFields: "设备维护记录, 故障记录",
          impact: "中等影响",
          status: "已处理",
          statusClass: "bg-green-100 text-green-800",
        },
        {
          category: "人员数据",
          description: "人员信息及操作记录",
          icon: "fas fa-users",
          iconBg: "bg-purple-100",
          iconColor: "text-purple-600",
          completenessRate: "88.6%",
          completenessValue: 88.6,
          rateColor: "text-blue-600",
          missingFields: "培训记录, 操作权限",
          impact: "低影响",
          status: "未处理",
          statusClass: "bg-red-100 text-red-800",
        },
        {
          category: "环境数据",
          description: "环境监测数据",
          icon: "fas fa-leaf",
          iconBg: "bg-green-100",
          iconColor: "text-green-600",
          completenessRate: "90.2%",
          completenessValue: 90.2,
          rateColor: "text-blue-600",
          missingFields: "噪声数据, 排放数据",
          impact: "中等影响",
          status: "处理中",
          statusClass: "bg-yellow-100 text-yellow-800",
        },
      ],
      accuracyData: [
        {
          name: "生产数据",
          description: "生产过程基础数据",
          icon: "fas fa-industry",
          iconBg: "bg-blue-100",
          iconColor: "text-blue-600",
          accuracyRate: "92.4%",
          accuracyValue: 92.4,
          accuracyColor: "text-green-600",
          accuracyBarColor: "#48bb78",
          errorRate: "7.6%",
          errorValue: 7.6,
          errorColor: "text-red-600",
          errorBarColor: "#f56565",
          mainIssue: "数值偏差超标",
        },
        {
          name: "安全监测数据",
          description: "安全生产监测数据",
          icon: "fas fa-shield-alt",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
          accuracyRate: "94.8%",
          accuracyValue: 94.8,
          accuracyColor: "text-green-600",
          accuracyBarColor: "#48bb78",
          errorRate: "5.2%",
          errorValue: 5.2,
          errorColor: "text-red-600",
          errorBarColor: "#f56565",
          mainIssue: "传感器校准不准确",
        },
        {
          name: "设备数据",
          description: "设备运行状态数据",
          icon: "fas fa-cogs",
          iconBg: "bg-green-100",
          iconColor: "text-green-600",
          accuracyRate: "90.2%",
          accuracyValue: 90.2,
          accuracyColor: "text-blue-600",
          accuracyBarColor: "#4299e1",
          errorRate: "9.8%",
          errorValue: 9.8,
          errorColor: "text-red-600",
          errorBarColor: "#f56565",
          mainIssue: "设备ID错误",
        },
        {
          name: "人员数据",
          description: "人员信息及操作记录",
          icon: "fas fa-users",
          iconBg: "bg-purple-100",
          iconColor: "text-purple-600",
          accuracyRate: "86.5%",
          accuracyValue: 86.5,
          accuracyColor: "text-blue-600",
          accuracyBarColor: "#4299e1",
          errorRate: "13.5%",
          errorValue: 13.5,
          errorColor: "text-red-600",
          errorBarColor: "#f56565",
          mainIssue: "人员信息不匹配",
        },
        {
          name: "环境数据",
          description: "环境监测数据",
          icon: "fas fa-leaf",
          iconBg: "bg-green-100",
          iconColor: "text-green-600",
          accuracyRate: "88.6%",
          accuracyValue: 88.6,
          accuracyColor: "text-blue-600",
          accuracyBarColor: "#4299e1",
          errorRate: "11.4%",
          errorValue: 11.4,
          errorColor: "text-red-600",
          errorBarColor: "#f56565",
          mainIssue: "监测设备故障",
        },
        {
          name: "物流数据",
          description: "物料运输与库存数据",
          icon: "fas fa-truck",
          iconBg: "bg-yellow-100",
          iconColor: "text-yellow-600",
          accuracyRate: "84.2%",
          accuracyValue: 84.2,
          accuracyColor: "text-yellow-600",
          accuracyBarColor: "#ecc94b",
          errorRate: "15.8%",
          errorValue: 15.8,
          errorColor: "text-red-600",
          errorBarColor: "#f56565",
          mainIssue: "库存数量不准确",
        },
      ],
      dataQualityIssues: JSON.parse(
        localStorage.getItem("dataQualityIssues")
      ) || [
        {
          description: "生产线温度传感器数据异常",
          dataType: "安全监测数据",
          impact: "3号高炉生产线",
          severity: "高",
          severityValue: "high",
          severityClass: "bg-red-100 text-red-800",
          discoveryTime: "2025-07-07 08:45:23",
          status: "处理中",
          statusValue: "processing",
          statusClass: "bg-yellow-100 text-yellow-800",
        },
        {
          description: "员工考勤数据缺失",
          dataType: "人员数据",
          impact: "安全生产部门",
          severity: "中",
          severityValue: "medium",
          severityClass: "bg-yellow-100 text-yellow-800",
          discoveryTime: "2025-07-06 14:22:56",
          status: "已处理",
          statusValue: "resolved",
          statusClass: "bg-green-100 text-green-800",
        },
        {
          description: "设备维护记录不完整",
          dataType: "设备数据",
          impact: "2号轧钢车间",
          severity: "中",
          severityValue: "medium",
          severityClass: "bg-yellow-100 text-yellow-800",
          discoveryTime: "2025-07-05 16:38:12",
          status: "未处理",
          statusValue: "pending",
          statusClass: "bg-red-100 text-red-800",
        },
        {
          description: "气体浓度监测数据异常波动",
          dataType: "安全监测数据",
          impact: "焦化车间",
          severity: "高",
          severityValue: "high",
          severityClass: "bg-red-100 text-red-800",
          discoveryTime: "2025-07-07 10:15:48",
          status: "处理中",
          statusValue: "processing",
          statusClass: "bg-yellow-100 text-yellow-800",
        },
        {
          description: "能耗数据计算错误",
          dataType: "生产数据",
          impact: "全厂能源系统",
          severity: "中",
          severityValue: "medium",
          severityClass: "bg-yellow-100 text-yellow-800",
          discoveryTime: "2025-07-04 09:28:37",
          status: "已处理",
          statusValue: "resolved",
          statusClass: "bg-green-100 text-green-800",
        },
        {
          description: "物料库存数据不准确",
          dataType: "物流数据",
          impact: "原料仓库",
          severity: "低",
          severityValue: "low",
          severityClass: "bg-blue-100 text-blue-800",
          discoveryTime: "2025-07-03 11:42:19",
          status: "已处理",
          statusValue: "resolved",
          statusClass: "bg-green-100 text-green-800",
        },
        {
          description: "环境噪声监测数据缺失",
          dataType: "环境数据",
          impact: "厂界周边",
          severity: "低",
          severityValue: "low",
          severityClass: "bg-blue-100 text-blue-800",
          discoveryTime: "2025-07-02 15:56:34",
          status: "未处理",
          statusValue: "pending",
          statusClass: "bg-red-100 text-red-800",
        },
      ],
      improvementSuggestions: [
        {
          title: "完善安全监测数据采集流程",
          icon: "fas fa-shield-alt",
          iconBg: "bg-red-100",
          iconColor: "text-red-600",
          priority: "高优先级",
          priorityClass: "bg-red-100 text-red-800",
          description:
            "针对安全监测数据的采集过程，建议增加自动校验机制，确保数据的实时性和准确性。同时，对传感器进行定期校准，减少数据异常的发生。",
          expectedResult:
            "提高安全监测数据准确率至98%以上，减少异常数据发生频率。",
          applicableCompanies: "河钢集团、宝钢集团、首钢集团",
        },
        {
          title: "优化设备数据管理系统",
          icon: "fas fa-cogs",
          iconBg: "bg-green-100",
          iconColor: "text-green-600",
          priority: "中优先级",
          priorityClass: "bg-yellow-100 text-yellow-800",
          description:
            "对设备数据管理系统进行升级，增加自动化数据录入功能，减少人工操作环节。建立设备数据字典，规范数据格式，提高数据一致性。",
          expectedResult: "设备数据完整性提升至95%以上，减少数据录入错误率。",
          applicableCompanies: "全部企业",
        },
        {
          title: "建立数据质量监控预警机制",
          icon: "fas fa-bell",
          iconBg: "bg-blue-100",
          iconColor: "text-blue-600",
          priority: "中优先级",
          priorityClass: "bg-yellow-100 text-yellow-800",
          description:
            "建立全面的数据质量监控预警机制，对数据质量进行实时监控，设置阈值预警，及时发现并处理数据质量问题。",
          expectedResult: "问题发现时间缩短80%，处理效率提高50%。",
          applicableCompanies: "河钢集团、宝钢集团、首钢集团、鞍钢集团",
        },
        {
          title: "加强人员数据管理培训",
          icon: "fas fa-users",
          iconBg: "bg-purple-100",
          iconColor: "text-purple-600",
          priority: "低优先级",
          priorityClass: "bg-blue-100 text-blue-800",
          description:
            "针对人员数据录入和管理人员，开展数据质量管理培训，提高数据录入的规范性和准确性。建立数据责任制，明确各环节责任人。",
          expectedResult: "人员数据准确率提升至92%以上，完整性提升至95%。",
          applicableCompanies: "武钢集团、马钢集团",
        },
      ],
    };
  },
  computed: {
    // 获取选中的企业显示文本
    getSelectedCompanyLabel() {
      const company = this.companyOptions.find(
        (opt) => opt.value === this.selectedCompany
      );
      return company ? company.label : "全部企业";
    },
    // 检查是否有活跃的筛选条件
    hasActiveFilters() {
      return this.selectedCompany !== "all" || this.startDate || this.endDate;
    },
    // 添加计算属性来筛选数据
    filteredDataQualityIssues() {
      return this.dataQualityIssues.filter((issue) => {
        const severityMatch =
          this.severityFilter === "all" ||
          issue.severityValue === this.severityFilter;
        const statusMatch =
          this.statusFilter === "all" ||
          issue.statusValue === this.statusFilter;
        return severityMatch && statusMatch;
      });
    },
    // 添加分页计算属性
    paginatedDataQualityIssues() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredDataQualityIssues.slice(start, end);
    },
    totalFilteredIssues() {
      return this.filteredDataQualityIssues.length;
    },
  },
  mounted() {
    // 使用 $nextTick 确保 DOM 完全渲染后再初始化图表
    this.$nextTick(() => {
      // 延迟初始化图表，确保容器完全渲染
      setTimeout(() => {
        this.initQualityTrendChart();
        this.initQualityIssueChart();
        this.initCompanyQualityChart();
        this.initTimelinessChart();

        // 再次触发resize确保图表正确渲染
        setTimeout(() => {
          this.handleResize();
        }, 100);
      }, 100);
    });
    // 响应窗口大小变化
    window.addEventListener("resize", this.handleResize);
    // 更新时间
    this.updateCurrentTime();
    setInterval(this.updateCurrentTime, 1000);
    // 点击外部关闭下拉菜单的事件监听
    document.addEventListener("click", this.handleClickOutside);
  },
  beforeDestroy() {
    // 移除事件监听
    document.removeEventListener("click", this.handleClickOutside);
  },
  methods: {
    // 切换企业下拉菜单
    toggleCompanyDropdown() {
      this.showCompanyDropdown = !this.showCompanyDropdown;
    },
    // 选择企业
    selectCompany(company) {
      this.selectedCompany = company;
      this.showCompanyDropdown = false;
      
    },
    // 清空日期筛选
    clearDateFilter() {
      this.startDate = "";
      this.endDate = "";
      
    },
    // 处理查询
    async handleQuery() {
      this.isQuerying = true;
      
      try {
        // 模拟API调用
        await new Promise((resolve) => setTimeout(resolve, 1000));
        // 根据筛选条件更新图表数据
        this.updateChartsWithFilteredData();
        // 显示成功提示
        this.showNotification("查询成功", "数据已根据筛选条件更新", "success");
      } catch (error) {
        this.showNotification("查询失败", "请检查网络连接后重试", "error");
      } finally {
        this.isQuerying = false;
      }
    },
    // 处理导出
    async handleExport() {
      this.isExporting = true;
      
      try {
        // 模拟导出过程
        await new Promise((resolve) => setTimeout(resolve, 1500));
        // 生成导出数据
        this.generateExportData();
        // 显示成功提示
        this.showNotification("导出成功", "数据导出已完成", "success");
      } catch (error) {
        this.showNotification("导出失败", "请检查网络连接后重试", "error");
      } finally {
        this.isExporting = false;
      }
    },
    // 重置所有筛选条件
    resetAllFilters() {
      this.selectedCompany = "all";
      this.startDate = "";
      this.endDate = "";
      
      // 重新加载默认数据
      this.loadDefaultData();
      this.showNotification("重置成功", "已恢复默认筛选条件", "info");
    },
    // 根据筛选条件更新图表数据
    updateChartsWithFilteredData() {
      // 根据筛选条件重新初始化图表
      this.$nextTick(() => {
        setTimeout(() => {
          // 销毁现有图表实例
          if (this.qualityTrendChart) {
            this.qualityTrendChart.dispose();
            this.qualityTrendChart = null;
          }
          if (this.qualityIssueChart) {
            this.qualityIssueChart.dispose();
            this.qualityIssueChart = null;
          }
          if (this.companyQualityChart) {
            this.companyQualityChart.dispose();
            this.companyQualityChart = null;
          }

          // 重新初始化图表，传入筛选条件
          this.initQualityTrendChart();
          this.initQualityIssueChart();
          this.initCompanyQualityChart();
          this.initTimelinessChart();
        }, 100);
      });
    },
    // 加载默认数据
    loadDefaultData() {
      // 重新加载默认的图表数据
      this.updateChartsWithFilteredData();
    },
    // 生成导出数据
    generateExportData() {
      // 创建导出的数据内容
      const exportData = {
        filters: {
          company: this.getSelectedCompanyLabel,
          startDate: this.startDate,
          endDate: this.endDate,
        },
        timestamp: new Date().toLocaleString(),
        dataQuality: {
          score: 86.5,
          completeness: "92.8%",
          accuracy: "88.4%",
          timeliness: "94.2%",
        },
        issues: this.filteredDataQualityIssues,
        suggestions: this.improvementSuggestions,
      };
      // 创建Blob对象并下载
      const content = JSON.stringify(exportData, null, 2);
      const blob = new Blob([content], {
        type: "application/json;charset=utf-8",
      });
      const url = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = `数据质量分析报告_${
        new Date().toISOString().split("T")[0]
      }.json`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    },
    // 显示通知
    showNotification(title, message, type = "info") {
      // 创建自定义通知
      const notification = document.createElement("div");
      notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 max-w-sm transform transition-all duration-300 ${
        type === "success"
          ? "bg-green-50 border border-green-200 text-green-800"
          : type === "error"
          ? "bg-red-50 border border-red-200 text-red-800"
          : type === "warning"
          ? "bg-yellow-50 border border-yellow-200 text-yellow-800"
          : "bg-blue-50 border border-blue-200 text-blue-800"
      }`;
      notification.innerHTML = `
      <div class="flex items-start">
        <i class="fas ${
          type === "success"
            ? "fa-check-circle"
            : type === "error"
            ? "fa-exclamation-circle"
            : type === "warning"
            ? "fa-exclamation-triangle"
            : "fa-info-circle"
        } mr-3 mt-0.5 flex-shrink-0"></i>
        <div class="flex-1">
          <div class="font-medium">${title}</div>
          <div class="text-sm mt-1">${message}</div>
        </div>
        <button onclick="this.parentElement.parentElement.remove()" class="ml-4 text-gray-400 hover:text-gray-600">
          <i class="fas fa-times"></i>
        </button>
      </div>
    `;
      document.body.appendChild(notification);
      // 3秒后自动移除
      setTimeout(() => {
        if (notification.parentElement) {
          notification.remove();
        }
      }, 3000);
    },
    // 点击外部关闭下拉菜单的事件监听
    handleClickOutside(event) {
      // 关闭企业下拉菜单
      if (this.showCompanyDropdown && !event.target.closest(".relative")) {
        this.showCompanyDropdown = false;
      }
    },
    // 添加分页相关方法
    handlePageChange(page) {
      this.currentPage = page;
    },
    handlePageSizeChange(size) {
      this.pageSize = size;
      // 重置到第一页
      this.currentPage = 1;
    },
    toggleMenu(index) {
      this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
      // 如果展开了菜单，则将其他菜单收起
      if (this.mainMenus[index].expanded) {
        this.mainMenus.forEach((menu, i) => {
          if (i !== index) {
            menu.expanded = false;
          }
        });
      }
    },
    selectSubmenu(menuIndex, submenuIndex) {
      // 重置所有菜单的激活状态
      this.mainMenus.forEach((menu) => {
        menu.active = false;
        menu.subMenus.forEach((submenu) => {
          submenu.active = false;
        });
      });
      // 设置当前选中的菜单和子菜单为激活状态
      this.mainMenus[menuIndex].active = true;
      this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
    },
    updateCurrentTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    handleResize() {
      // 获取所有图表实例并调整大小
      const chartRefs = [
        this.qualityTrendChart,
        this.qualityIssueChart,
        this.companyQualityChart,
        this.timelinessChart,
      ];
      chartRefs.forEach((chart) => {
        if (chart) {
          chart.resize();
          // 强制刷新图表，解决部分区域不显示的问题
          chart.setOption(chart.getOption());
        }
      });
    },
    changePeriod(period) {
      this.currentPeriod = period;
      // 根据选择的周期更新图表数据
      this.updateQualityTrendChartData();
    },
    changeCompanyPeriod(period) {
      this.currentCompanyPeriod = period;
      // 根据选择的周期更新企业数据质量评分对比图表
      this.updateCompanyQualityChartData();
    },
    // 更新质量评分趋势图表数据
    updateQualityTrendChartData() {
      // 销毁现有图表实例
      if (this.qualityTrendChart) {
        this.qualityTrendChart.dispose();
      }
      // 重新初始化图表
      this.initQualityTrendChart();
    },
    // 更新企业数据质量评分对比图表数据
    updateCompanyQualityChartData() {
      // 销毁现有图表实例
      if (this.companyQualityChart) {
        this.companyQualityChart.dispose();
      }
      // 重新初始化图表
      this.initCompanyQualityChart();
    },
    initQualityTrendChart() {
      if (!this.$refs.qualityTrendChart) return;

      // 销毁现有图表实例
      if (this.qualityTrendChart) {
        this.qualityTrendChart.dispose();
      }

      this.qualityTrendChart = echarts.init(this.$refs.qualityTrendChart);
      const chart = this.qualityTrendChart;

      // 根据筛选条件调整数据
      const filterInfo = this.getFilterInfo();

      // 根据周期生成不同的数据
      let xAxisData = [];
      let xAxisInterval = 0;

      switch (this.currentPeriod) {
        case "week":
          xAxisData = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
          xAxisInterval = 0;
          break;
        case "month":
          xAxisData = Array.from({ length: 30 }, (_, i) => `${i + 1}日`);
          xAxisInterval = 4;
          break;
        case "year":
          xAxisData = Array.from({ length: 12 }, (_, i) => `${i + 1}月`);
          xAxisInterval = 0;
          break;
      }

      // 根据企业筛选条件调整显示的企业
      const allCompanies = [
        "河钢集团",
        "宝钢集团",
        "首钢集团",
        "鞍钢集团",
        "武钢集团",
        "马钢集团",
      ];

      const displayCompanies =
        this.selectedCompany === "all"
          ? allCompanies
          : [this.getSelectedCompanyLabel];

      // 企业数据模式 - 根据筛选条件调整
      const companyDataPatterns = {
        河钢集团: {
          base: filterInfo.company === "hegang" ? 88 : 86,
          trend: 0.1,
        },
        宝钢集团: {
          base: filterInfo.company === "baogang" ? 86 : 84,
          trend: 0.12,
        },
        首钢集团: {
          base: filterInfo.company === "shougang" ? 84 : 82,
          trend: 0.08,
        },
        鞍钢集团: {
          base: filterInfo.company === "angang" ? 82 : 80,
          trend: 0.15,
        },
        武钢集团: {
          base: filterInfo.company === "wugang" ? 80 : 78,
          trend: 0.05,
        },
        马钢集团: {
          base: filterInfo.company === "magang" ? 78 : 76,
          trend: 0.07,
        },
      };

      // 根据时间范围调整数据波动
      const timeRangeEffect = this.getTimeRangeEffect();

      const generateCompanyData = (pattern, length) => {
        return Array.from({ length }, (_, i) => {
          const seasonalFluctuation = Math.sin(i * 0.5) * 3 * timeRangeEffect;
          const trend = pattern.trend * i;
          const randomFluctuation = ((i * 3.14159) % 2) - 1;
          return Math.max(
            60,
            Math.min(
              100,
              Math.round(
                pattern.base + seasonalFluctuation + trend + randomFluctuation
              )
            )
          );
        });
      };
      const series = displayCompanies.map((company) => ({
        name: company,
        type: "line",
        smooth: true,
        lineStyle: {
          width: 2,
          color: this.getCompanyColor(company),
        },
        symbol: "circle",
        symbolSize: 6,
        itemStyle: {
          color: this.getCompanyColor(company),
        },
        data: generateCompanyData(
          companyDataPatterns[company],
          xAxisData.length
        ),
      }));
      const option = {
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: displayCompanies,
          bottom: 10,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          top: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData,
            axisLine: {
              lineStyle: {
                color: "#e2e8f0",
              },
            },
            axisLabel: {
              color: "#718096",
              fontSize: 10,
              interval: xAxisInterval,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "质量评分",
            min: 60,
            max: 100,
            interval: 5,
            axisLabel: {
              formatter: "{value}",
              color: "#718096",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#e2e8f0",
              },
            },
          },
        ],
        series: series,
      };
      chart.setOption(option);
    },
    initQualityIssueChart() {
      if (!this.$refs.qualityIssueChart) return;
      if (this.qualityIssueChart) {
        this.qualityIssueChart.dispose();
      }

      this.qualityIssueChart = echarts.init(this.$refs.qualityIssueChart);
      const chart = this.qualityIssueChart;
      // 根据筛选条件调整数据
      const filterInfo = this.getFilterInfo();
      // 基础数据
      const baseData = [
        { value: 35, name: "数据缺失" },
        { value: 28, name: "数据不准确" },
        { value: 16, name: "数据不一致" },
        { value: 12, name: "数据重复" },
        { value: 8, name: "数据格式错误" },
        { value: 5, name: "其他问题" },
      ];
      // 根据企业筛选调整数据分布
      let adjustedData = baseData;
      if (this.selectedCompany !== "all") {
        // 如果是特定企业，调整问题分布
        adjustedData = baseData.map((item) => ({
          ...item,
          value: Math.round(item.value * (0.8 + Math.random() * 0.4)), // 随机调整
        }));
      }
      // 根据时间范围调整数据
      if (this.startDate && this.endDate) {
        const daysDiff = this.getDaysDiff(this.startDate, this.endDate);
        const timeFactor = Math.min(daysDiff / 30, 2); // 时间范围影响因子
        adjustedData = adjustedData.map((item) => ({
          ...item,
          value: Math.round(item.value * timeFactor),
        }));
      }
      const option = {
        animation: true, // 启用动画，确保图表正确渲染
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: "center",
          data: adjustedData.map((item) => item.name),
        },
        series: [
          {
            name: "质量问题分布",
            type: "pie",
            radius: ["50%", "70%"],
            center: ["65%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true, // 改为显示标签
              position: "outside", // 标签位置在外侧
              formatter: "{b}: {c} ({d}%)",
              fontSize: 12,
              color: "#718096",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "14",
                fontWeight: "bold",
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            labelLine: {
              show: true, // 显示标签线
              length: 10,
              length2: 15,
            },
            itemStyle: {
              borderColor: "#fff", // 添加边框，增强视觉分离
              borderWidth: 2,
            },
            data: adjustedData.map((item, index) => ({
              ...item,
              itemStyle: {
                color: this.getIssueColor(index),
              },
            })),
            // 添加起始角度，确保第一个扇区（数据缺失）在可见位置
            startAngle: 90,
            // 确保所有扇区都正确渲染
            stillShowZeroSum: true,
          },
        ],
      };
      chart.setOption(option);
      // 强制触发图表重绘，解决初始化时部分区域不显示的问题
      this.$nextTick(() => {
        setTimeout(() => {
          chart.resize();
          // 强制刷新图表数据
          chart.setOption(option, true);
        }, 100);
      });
    },
    initCompanyQualityChart() {
      if (!this.$refs.companyQualityChart) return;
      if (this.companyQualityChart) {
        this.companyQualityChart.dispose();
      }
      this.companyQualityChart = echarts.init(this.$refs.companyQualityChart);
      const chart = this.companyQualityChart;
      // 根据筛选条件调整数据
      const filterInfo = this.getFilterInfo();
      // 基础数据
      let baseData = [
        {
          name: "河钢集团",
          integrity: 96,
          accuracy: 94,
          timeliness: 98,
          overall: 94,
        },
        {
          name: "宝钢集团",
          integrity: 94,
          accuracy: 92,
          timeliness: 96,
          overall: 92,
        },
        {
          name: "首钢集团",
          integrity: 92,
          accuracy: 90,
          timeliness: 94,
          overall: 90,
        },
        {
          name: "鞍钢集团",
          integrity: 88,
          accuracy: 86,
          timeliness: 90,
          overall: 86,
        },
        {
          name: "武钢集团",
          integrity: 86,
          accuracy: 84,
          timeliness: 88,
          overall: 84,
        },
        {
          name: "马钢集团",
          integrity: 82,
          accuracy: 80,
          timeliness: 84,
          overall: 80,
        },
      ];
      // 根据企业筛选调整显示的数据
      let displayData = baseData;
      if (this.selectedCompany !== "all") {
        displayData = baseData.filter(
          (item) => item.name === this.getSelectedCompanyLabel
        );
      }
      // 根据时间范围调整数据
      let chartData = displayData;
      switch (this.currentCompanyPeriod) {
        case "month":
          // 保持原数据
          break;
        case "quarter":
          chartData = displayData.map((item) => ({
            ...item,
            integrity: Math.min(100, item.integrity + 2),
            accuracy: Math.min(100, item.accuracy + 2),
            timeliness: Math.min(100, item.timeliness + 2),
            overall: Math.min(100, item.overall + 2),
          }));
          break;
        case "year":
          chartData = displayData.map((item) => ({
            ...item,
            integrity: Math.min(100, item.integrity + 4),
            accuracy: Math.min(100, item.accuracy + 4),
            timeliness: Math.min(100, item.timeliness + 4),
            overall: Math.min(100, item.overall + 4),
          }));
          break;
      }
      // 根据自定义时间范围进一步调整
      if (this.startDate && this.endDate) {
        const timeEffect = this.getTimeRangeEffect();
        chartData = chartData.map((item) => ({
          ...item,
          integrity: Math.min(100, Math.round(item.integrity * timeEffect)),
          accuracy: Math.min(100, Math.round(item.accuracy * timeEffect)),
          timeliness: Math.min(100, Math.round(item.timeliness * timeEffect)),
          overall: Math.min(100, Math.round(item.overall * timeEffect)),
        }));
      }
      const option = {
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["完整性", "准确性", "及时性", "总体评分"],
          top: 10,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          max: 100,
          axisLine: {
            lineStyle: {
              color: "#e2e8f0",
            },
          },
          axisLabel: {
            formatter: "{value}",
            color: "#718096",
          },
          splitLine: {
            lineStyle: {
              color: "#e2e8f0",
            },
          },
        },
        yAxis: {
          type: "category",
          data: chartData.map((item) => item.name),
          axisLine: {
            lineStyle: {
              color: "#e2e8f0",
            },
          },
          axisLabel: {
            color: "#718096",
          },
        },
        series: [
          {
            name: "完整性",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: chartData.map((item) => item.integrity),
            itemStyle: {
              color: "#4299e1",
            },
          },
          {
            name: "准确性",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: chartData.map((item) => item.accuracy),
            itemStyle: {
              color: "#48bb78",
            },
          },
          {
            name: "及时性",
            type: "bar",
            stack: "total",
            label: {
              show: false,
            },
            emphasis: {
              focus: "series",
            },
            data: chartData.map((item) => item.timeliness),
            itemStyle: {
              color: "#9f7aea",
            },
          },
          {
            name: "总体评分",
            type: "bar",
            barWidth: 5,
            barGap: "-100%",
            z: 2,
            data: chartData.map((item) => item.overall),
            itemStyle: {
              color: "#f56565",
            },
            label: {
              show: true,
              position: "right",
              formatter: "{c}",
              fontSize: 12,
              color: "#718096",
            },
          },
        ],
      };
      chart.setOption(option);
    },
    // 添加辅助方法到 methods 中
    getFilterInfo() {
      return {
        company: this.selectedCompany,
        startDate: this.startDate,
        endDate: this.endDate,
        companyLabel: this.getSelectedCompanyLabel,
      };
    },
    getTimeRangeEffect() {
      if (!this.startDate || !this.endDate) return 1;
      const daysDiff = this.getDaysDiff(this.startDate, this.endDate);
      // 时间范围越长，数据质量相对越好（模拟效果）
      return Math.min(1 + (daysDiff / 365) * 0.1, 1.2);
    },
    getDaysDiff(startDate, endDate) {
      const start = new Date(startDate);
      const end = new Date(endDate);
      return Math.ceil((end - start) / (1000 * 60 * 60 * 24));
    },
    getCompanyColor(company) {
      const colorMap = {
        河钢集团: "#4299e1",
        宝钢集团: "#48bb78",
        首钢集团: "#f56565",
        鞍钢集团: "#9f7aea",
        武钢集团: "#ecc94b",
        马钢集团: "#ed8936",
      };
      return colorMap[company] || "#a0aec0";
    },
    getIssueColor(index) {
      const colors = [
        "#4299e1",
        "#f56565",
        "#48bb78",
        "#9f7aea",
        "#ecc94b",
        "#a0aec0",
      ];
      return colors[index] || "#a0aec0";
    },
    initTimelinessChart() {
      if (!this.$refs.timelinessChart) return;
      this.timelinessChart = echarts.init(this.$refs.timelinessChart);
      const chart = this.timelinessChart;
      const option = {
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["及时上报率", "平均延迟时间"],
          top: 10,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "生产数据",
              "安全监测数据",
              "设备数据",
              "人员数据",
              "环境数据",
              "物流数据",
            ],
            axisLine: {
              lineStyle: {
                color: "#e2e8f0",
              },
            },
            axisLabel: {
              color: "#718096",
              fontSize: 10,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "及时上报率(%)",
            min: 70,
            max: 100,
            interval: 5,
            axisLabel: {
              formatter: "{value}",
              color: "#718096",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#e2e8f0",
              },
            },
          },
          {
            type: "value",
            name: "平均延迟(分钟)",
            min: 0,
            max: 60,
            interval: 10,
            axisLabel: {
              formatter: "{value}",
              color: "#718096",
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "及时上报率",
            type: "bar",
            barWidth: 30,
            data: [
              { value: 96.5, itemStyle: { color: "#4299e1" } },
              { value: 98.2, itemStyle: { color: "#4299e1" } },
              { value: 94.8, itemStyle: { color: "#4299e1" } },
              { value: 92.6, itemStyle: { color: "#4299e1" } },
              { value: 95.4, itemStyle: { color: "#4299e1" } },
              { value: 90.2, itemStyle: { color: "#4299e1" } },
            ],
            label: {
              show: true,
              position: "top",
              formatter: "{c}%",
              fontSize: 10,
              color: "#718096",
            },
          },
          {
            name: "平均延迟时间",
            type: "line",
            yAxisIndex: 1,
            smooth: true,
            lineStyle: {
              width: 3,
              color: "#f56565",
            },
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              color: "#f56565",
            },
            data: [12, 8, 18, 25, 15, 32],
          },
        ],
      };
      chart.setOption(option);
    },
    // 显示详情
    showDetail(item) {
      this.currentSelectedItem = item;
      // 记录当前项的索引
      this.currentSelectedIndex = this.completenessData.findIndex(
        (dataItem) => dataItem.category === item.category
      );
      this.showDetailModal = true;
      // 使用 $nextTick 确保模态框已经渲染
      this.$nextTick(() => {
        // 延迟初始化图表，确保DOM完全渲染
        setTimeout(() => {
          this.initCompletenessTrendChart();
        }, 100);
      });
    },
    // 处理数据
    handleProcess(item) {
      this.currentSelectedItem = item;
      // 记录当前项的索引
      this.currentSelectedIndex = this.completenessData.findIndex(
        (dataItem) => dataItem.category === item.category
      );
      this.showProcessModal = true;
    },
    // 关闭模态框
    closeModal() {
      this.showDetailModal = false;
      this.showProcessModal = false;
      this.currentSelectedItem = null;
      this.currentSelectedIndex = -1; // 重置索引
      // 销毁完整率趋势图表
      if (this.completenessTrendChart) {
        this.completenessTrendChart.dispose();
        this.completenessTrendChart = null;
      }
    },
    // 确认处理
    async confirmProcess() {
      if (this.currentSelectedItem && this.currentSelectedIndex !== -1) {
        try {
          await ElMessageBox.confirm(
            `确定要处理数据类别 "${this.currentSelectedItem.category}" 吗？`,
            "确认处理",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          );

          // 更新源数据
          this.completenessData[this.currentSelectedIndex].status = "已处理";
          this.completenessData[this.currentSelectedIndex].statusClass =
            "bg-green-100 text-green-800";

          // 同步更新当前选中项
          this.currentSelectedItem.status = "已处理";
          this.currentSelectedItem.statusClass = "bg-green-100 text-green-800";

          // 保存到 localStorage
          this.saveCompletenessData();

          // 强制更新视图
          this.$forceUpdate();

          ElMessage({
            message: `已成功处理数据类别: ${this.currentSelectedItem.category}`,
            type: "success",
            duration: 3000,
          });
        } catch (error) {
          // 用户点击取消，不执行任何操作
          
        }
      }
      this.closeModal();
    },
    // 显示数据质量问题详情
    showIssueDetail(issue) {
      this.currentIssue = issue;
      this.showIssueDetailModal = true;
    },
    // 处理数据质量问题
    handleIssueProcess(issue) {
      this.currentIssue = { ...issue }; // 创建副本避免直接修改
      // 记录当前项的索引
      this.currentIssueIndex = this.dataQualityIssues.findIndex(
        (dataItem) => dataItem.description === issue.description
      );
      this.showIssueProcessModal = true;
    },
    // 关闭数据质量问题模态框
    closeIssueModal() {
      this.showIssueDetailModal = false;
      this.showIssueProcessModal = false;
      this.currentIssue = null;
      this.currentIssueIndex = -1;
    },
    // 完整的确认处理方法
    confirmIssueProcess() {
      if (this.currentIssue && this.currentIssueIndex !== -1) {
        // 获取处理方案和说明
        const processPlan = document.querySelector("select").value;
        const processDescription = document.querySelector("textarea").value;
        const estimatedCompletion =
          document.querySelector('input[type="date"]').value;

        if (!processPlan) {
          ElMessage({
            message: "请选择处理方案",
            type: "warning",
            duration: 3000,
          });
          return;
        }

        // 更新源数据
        this.dataQualityIssues[this.currentIssueIndex] = {
          ...this.dataQualityIssues[this.currentIssueIndex],
          status: "已处理",
          statusValue: "resolved",
          statusClass: "bg-green-100 text-green-800",
          processPlan: processPlan,
          processDescription: processDescription,
          estimatedCompletion: estimatedCompletion,
          processTime: this.getCurrentTime(),
        };

        // 保存到本地存储
        this.saveDataQualityIssues();

        // 显示成功提示
        ElMessage({
          message: `已成功处理数据质量问题: ${this.currentIssue.description}`,
          type: "success",
          duration: 3000,
        });

        // 关闭模态框
        this.closeIssueModal();
      }
    },
    // 获取当前时间的方法
    getCurrentTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, "0");
      const minutes = String(now.getMinutes()).padStart(2, "0");
      const seconds = String(now.getSeconds()).padStart(2, "0");
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 保存数据质量问题到本地存储
    saveDataQualityIssues() {
      localStorage.setItem(
        "dataQualityIssues",
        JSON.stringify(this.dataQualityIssues)
      );
    },
    // 根据数据类型获取图标
    getIssueIcon(dataType) {
      const iconMap = {
        生产数据: "fas fa-industry",
        安全监测数据: "fas fa-shield-alt",
        设备数据: "fas fa-cogs",
        人员数据: "fas fa-users",
        环境数据: "fas fa-leaf",
        物流数据: "fas fa-truck",
      };
      return iconMap[dataType] || "fas fa-exclamation-triangle";
    },
    // 根据数据类型获取图标背景色
    getIssueIconBg(dataType) {
      const bgMap = {
        生产数据: "bg-blue-100",
        安全监测数据: "bg-red-100",
        设备数据: "bg-green-100",
        人员数据: "bg-purple-100",
        环境数据: "bg-green-100",
        物流数据: "bg-yellow-100",
      };
      return bgMap[dataType] || "bg-gray-100";
    },
    // 根据数据类型获取图标颜色
    getIssueIconColor(dataType) {
      const colorMap = {
        生产数据: "text-blue-600",
        安全监测数据: "text-red-600",
        设备数据: "text-green-600",
        人员数据: "text-purple-600",
        环境数据: "text-green-600",
        物流数据: "text-yellow-600",
      };
      return colorMap[dataType] || "text-gray-600";
    },
    // 新增保存数据的方法
    saveCompletenessData() {
      localStorage.setItem(
        "completenessData",
        JSON.stringify(this.completenessData)
      );
    },
    // 初始化完整率趋势图表
    initCompletenessTrendChart() {
      if (!this.$refs.completenessTrendChart) return;
      // 销毁已存在的图表实例
      if (this.completenessTrendChart) {
        this.completenessTrendChart.dispose();
      }
      // 初始化图表
      this.completenessTrendChart = echarts.init(
        this.$refs.completenessTrendChart
      );
      const chart = this.completenessTrendChart;

      // 模拟过去7天的完整率数据
      const xAxisData = [
        "6天前",
        "5天前",
        "4天前",
        "3天前",
        "2天前",
        "昨天",
        "今天",
      ];
      const currentRate = this.currentSelectedItem.completenessValue;
      // 生成趋势数据（模拟从低到高的改善趋势）
      const seriesData = [
        currentRate - 15,
        currentRate - 10,
        currentRate - 8,
        currentRate - 5,
        currentRate - 3,
        currentRate - 1,
        currentRate,
      ].map((rate) => Math.max(0, Math.min(100, rate))); // 确保在0-100范围内
      const option = {
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: "{b}: {c}%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: "#e2e8f0",
            },
          },
          axisLabel: {
            color: "#718096",
            fontSize: 10,
          },
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 100,
          axisLabel: {
            formatter: "{value}%",
            color: "#718096",
            fontSize: 10,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: "#e2e8f0",
            },
          },
        },
        series: [
          {
            name: "完整率",
            type: "line",
            smooth: true,
            lineStyle: {
              width: 3,
              color: "#4299e1",
            },
            symbol: "circle",
            symbolSize: 6,
            itemStyle: {
              color: "#4299e1",
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(66, 153, 225, 0.3)",
                  },
                  {
                    offset: 1,
                    color: "rgba(66, 153, 225, 0.1)",
                  },
                ],
              },
            },
            data: seriesData,
          },
        ],
      };

      chart.setOption(option);
    },
    // 显示建议详情
    showSuggestionDetail(suggestion) {
      this.currentSuggestion = suggestion;
      this.showSuggestionModal = true;
    },
    // 关闭建议详情模态框
    closeSuggestionModal() {
      this.showSuggestionModal = false;
      this.currentSuggestion = null;
    },
    // 处理建议
    async handleSuggestionAction(suggestion) {
      

      try {
        await ElMessageBox.confirm(
          `确定要开始实施建议 "${suggestion.title}" 吗？`,
          "确认实施",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "info",
          }
        );

        ElMessage({
          message: `已开始实施建议: ${suggestion.title}`,
          type: "success",
          duration: 3000,
        });

        // 这里可以添加实际的处理逻辑
        // this.implementSuggestion(suggestion);
      } catch (error) {
        // 用户点击取消
        
      }
    },
    // 切换严重程度筛选下拉框
    toggleSeverityFilter() {
      this.showSeverityFilter = !this.showSeverityFilter;
      // 关闭其他筛选器
      if (this.showSeverityFilter) {
        this.showStatusFilter = false;
      }
    },
    // 切换处理状态筛选下拉框
    toggleStatusFilter() {
      this.showStatusFilter = !this.showStatusFilter;
      // 关闭其他筛选器
      if (this.showStatusFilter) {
        this.showSeverityFilter = false;
      }
    },
    // 选择严重程度
    selectSeverity(severity) {
      this.severityFilter = severity;
      this.showSeverityFilter = false;
    },
    // 选择处理状态
    selectStatus(status) {
      this.statusFilter = status;
      this.showStatusFilter = false;
    },
    // 重置筛选
    resetFilters() {
      this.severityFilter = "all";
      this.statusFilter = "all";
    },
    // 点击外部关闭所有筛选器
    closeAllFilters() {
      this.showSeverityFilter = false;
      this.showStatusFilter = false;
    },
  },
};
</script>
<style scoped>
/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* 自定义颜色类 */
.bg-blue-100 {
  background-color: #ebf8ff;
}

.bg-red-100 {
  background-color: #fed7d7;
}

.bg-green-100 {
  background-color: #c6f6d5;
}

.bg-yellow-100 {
  background-color: #fefcbf;
}

.bg-purple-100 {
  background-color: #e9d8fd;
}

.bg-orange-100 {
  background-color: #feebc8;
}

.bg-teal-100 {
  background-color: #b2f5ea;
}

.bg-indigo-100 {
  background-color: #e5edff;
}

.text-blue-600 {
  color: #3182ce;
}

.text-red-600 {
  color: #e53e3e;
}

.text-green-600 {
  color: #38a169;
}

.text-yellow-600 {
  color: #d69e2e;
}

.text-purple-600 {
  color: #805ad5;
}

.text-orange-600 {
  color: #dd6b20;
}

.text-teal-600 {
  color: #319795;
}

.text-indigo-600 {
  color: #5a67d8;
}
</style>
